The ::first-letter pseudo-element in CSS allows you to target and style the first letter of a block-level element. It is commonly used to create decorative effects, like drop caps or emphasized initial letters in paragraphs.

Key Points

1
::first-letter targets only the very first letter of the text content of an element.
2
It can be combined with CSS properties like font-size, font-weight, color, float, and text-transform.
3
This pseudo-element applies only to block-level elements such as <p>, <div>, <section>, etc.
4
It does not require any additional HTML markup for styling the first letter.

Example: Styling the First Letter of a Paragraph

In this example, the first letter of the paragraph is enlarged, bolded, colored blue, and floated to the left, creating a classic drop cap effect.

Best Practices

1
Use ::first-letter to enhance readability or add decorative styling to text.
2
Combine with spacing and color properties for visual impact.
3
Avoid using for interactive elements; it is strictly for styling content.
4
Test across browsers to ensure consistent appearance.

Difficulty: 3/10

Topics: CSS pseudo-elements, typographic styling, selector specificity

Scenario Questions

0-2 years experience

1
You're building a blog post and want the first letter of the first paragraph to be larger and drop-capped — how would you do that with CSS?
2
If you apply ::first-letter to a div with display: inline, what happens and why?
3
You tried styling the first letter of a heading, but it didn't change — what are two possible reasons?

2-5 years experience

1
A designer wants drop caps on all article intros, but they break when the content is translated into languages without Latin script — how would you debug and fix this?
2
Your team’s CSS library uses ::first-letter for decorative initials, but it’s causing layout shifts on mobile — what’s likely happening and how would you resolve it?
3
A component renders a quote block with a leading quotation mark — the ::first-letter styles are applying to the quote symbol instead of the first letter. How do you fix this without changing the HTML?

5-8 years experience

1
You're designing a global content platform that supports 50+ languages — how would you architect a typographic system using ::first-letter that handles RTL, non-Latin scripts, and mixed content without breaking layout?
2
A legacy CMS generates dynamic article content with inline styles and nested spans — how would you ensure ::first-letter styling remains reliable across all edge cases without forcing HTML changes?
3
Your team is migrating from a legacy typographic system to CSS-based drop caps, but performance is lagging on low-end devices. What are the top 3 performance risks with ::first-letter and how would you mitigate them?

8+ years experience

1
You're leading a cross-team initiative to standardize content styling across 10+ products — how would you decide whether to use ::first-letter or a JavaScript-based solution for drop caps, considering accessibility, maintainability, and internationalization?
2
A legacy product uses ::first-letter for branding elements, but now needs to support dynamic content injection from third-party widgets — how would you design a migration path that preserves visual consistency while avoiding layout instability?
3
Your company is adopting a design system that includes typographic rules for global audiences. How would you advocate for or against using ::first-letter as a core component, weighing long-term maintenance, browser support, and accessibility compliance?

Follow-up Questions

❓What happens if the first letter is a punctuation mark or number?
❓Why wouldn't ::first-letter work on a span inside a paragraph?
❓How does it interact with CSS float or display: inline-block?